import { Button, Checkbox, Modal, Table, message } from 'antd';
import axios from 'axios';
import React, { Component } from 'react';

class Car extends Component {
    state = {
        selectedItems: [],
        all: []
    };
    componentDidMount() {
        this.getAll()
    }

    getAll = () => {
        let user = JSON.parse(localStorage.getItem('user'));
        axios.get('/shopping-car-server/car/all?userId=' + user.id)
            .then(response => {
                // 处理返回的数据
                const resp = response.data
                if (resp.success) {
                    this.setState({ all: resp.data });
                } else {
                    message.info(JSON.stringify(resp.data))
                }
            }).catch(error => {
                // 处理错误
                message.error(error)
            })
    }

    okDel = (carId) => {
        console.log(carId);
        axios.post('/shopping-car-server/car/del', { 'id': carId })
            .then(response => {
                // 处理返回的数据
                const resp = response.data
                if (resp.success) {
                    message.success(JSON.stringify(resp.data))
                } else {
                    message.error(JSON.stringify(resp.data))
                }
                this.getAll()
            }).catch(error => {
                // 处理错误
                message.error(error)
            })
        // this.forceUpdate()
        const { all, selectedItems } = this.state;
        this.setState({
            selectedItems: selectedItems.filter((itemId) => itemId !== carId),
        });
    }

    delete = (carId) => {
        Modal.confirm({
            // title:'删除?',
            content: '确认删除这条记录吗?',
            okText: '确认',
            cancelText: '取消',
            onOk: () => { this.okDel(carId) }
        })

    };

    buy = () => {
        const { selectedItems } = this.state;
        // 处理购买逻辑
        console.log(selectedItems);
    };

    cbChange = (e, carId) => {
        const { selectedItems } = this.state;
        if (e.target.checked) {
            this.setState({ selectedItems: [...selectedItems, carId] });
        } else {
            this.setState({
                selectedItems: selectedItems.filter((itemId) => itemId !== carId),
            });
        }
    }

    render() {
        const t = localStorage.getItem("token")
        if (!t) { message.info('未登录,1秒后跳转登录'); setTimeout(() => location.href = '/login', 1000); return }

        const { selectedItems, data, all } = this.state;
        const columns = [
            {
                title: '选择',
                dataIndex: 'carId',
                render: (carId) => (
                    <div>
                        <Checkbox
                            key={'cb' + carId}
                            onChange={(e) => this.cbChange(e, carId)}
                            checked={selectedItems.includes(carId)}
                        />
                    </div>
                ),
            },
            {
                title: '商品名称',
                dataIndex: 'productName',
            },
            {
                title: '单价',
                dataIndex: 'price',
            },
            {
                title: '数量',
                dataIndex: 'quantity',
            },
            {
                title: '操作',
                render: (_, record) => (
                    <Button key={'car' + record.carId} onClick={() => this.delete(record.carId)}>删除</Button>
                ),
            },
        ];
        return (
            <div>
                <Table
                    columns={columns}
                    dataSource={all}
                    pagination={false}
                />
                <Button onClick={this.buy}>结算</Button>
            </div>
        );
    }
}

export default Car;